// 视频播放器 基于阿里云播放器
<template>
  <div v-if="show">
    <vue-aliplayer-v2
      :source="src"
      ref="VueAliplayerV2"
      :options="options"
    />
  </div>
</template>
<script>

export default {
  name: "MyVideo",
  components: {},
  props: {
    src: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: "videoPlayer"
    }
  },
  data() {
    return {
      options: {
        // source:'//player.alicdn.com/video/aliyunmedia.mp4',
        isLive: true,   //切换为直播流的时候必填（true-直播状态，false-普通模式，播放器普通视频）
        width: "100%",
        height: this.height || '480px',
        autoplay: true,
        autoPlayDelay: 0,
        rePlay: false,
        videoHeight: "100%",
        playsinline: true, // 是否使用内置播放器
        preload: true,
        controlBarVisibility: "hover",
        videoWidth: "100%",
        useH5Prism: true,
        skinLayout: [
          {
            "name": "errorDisplay",
            "align": "tlabs",
            "x": 0,
            "y": 0
          },
          {
            "name": "controlBar",
            "align": "blabs",
            "x": 0,
            "y": 0,
            "children": [
              {
                "name": "fullScreenButton",
                "align": "tr",
                "x": 10,
                "y": 10
              }
            ]
          }
        ]
      },
      show: true,

    };
  },
  watch: {
    // 设置背景宽度
    height: {
      handler(newName, oldName) {
        console.log(this.$refs.VueAliplayerV2.$el.style.height = newName)
        // this.$refs.VueAliplayerV2.height = newName
        // console.log(newName);
      }
    },

  },
  mounted() {
    console.log("视频地址", this.src)
    // this.show = true
    this.play()

  },
  beforeDestroy() {

  },
  methods: {
    play() {
      this.$refs.VueAliplayerV2.play()
    },
    pause() {
      this.$refs.VueAliplayerV2.pause();
    },
    replay() {
      this.$refs.VueAliplayerV2.replay();
    },
    getCurrentTime() {
      // this.$refs.VueAliplayerV2.getCurrentTime();
      this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';
    },
    getStatus() {
      const status = this.$refs.VueAliplayerV2.getStatus();
      console.log(`getStatus:`, status);
      alert(`getStatus:${status}`);
    },

  }
};
</script>
<style lang="scss" scoped>
video {
  background: #2b2b2b;
}
</style>
